/*  小密蜂幻灯片类 v1.0 2008-07-16 请保留此注释,谢谢 ^_^ 
 *	Slider, version 1.0.0
 *  No(c) 2008 jusa wong <jusa.wong@gmail.com/3331137@qq.com> 
/*--------------------------------------------------------------------------*/
var Slider=Class.create();
Slider.prototype={
	initialize:function($element,$imgData,$buttonData,$options)
	{									
		this.setOptions($options);	
		this.id='_'+String(Math.round(Math.random()*(9999-1)));																//组件的随机Id
		this.screen=$($element),this.screenSetStyle();																		//获取容器,设置样式
		this.slideDiv=this.createSlideDiv(this.screen);																		//创建幻灯片荧幕
		if(this.options.isNeedButton) this.createButtonDiv(this.screen,$imgData.img.length-1,$imgData,$buttonData);			//创建按钮
		this.slideDiv.innerHTML=this.formatHtml($imgData.img[0],$imgData.url[0]);											//导入第一个数据
		this.counter=0,this.baby='1',this.virgin=true;
		var oThis=this;
		var browser=navigator.userAgent.toLowerCase();
		this.isIE=(browser.indexOf("msie")!=-1) ? true:false;		
		if(this.options.autoPlay) this.timer=setTimeout(function(){oThis.open(oThis,$imgData,$buttonData)},this.options.interVal);
	},
	setOptions:function($options)
	{
		this.options={
			autoPlay:true,											//自动播放
			isNeedButton:true,										//是否需要按钮	
			isNeedLink:true,										//是否需要链接	
			width:0,												//手动配置宽
			height:0,												//手动配置高
			buttonLeft:0,											//手机配置按钮的靠左距离			
			buttonTop:0,											//手机配置按钮的靠上距离
			screenClassName:'screenStyle',							//屏幕的配置,就是放置幻灯片的DOM元素了 -_-!
			slideClassName:'slideStyleC',							//幻灯片效果的样式名
			slidePicClassName:'slidePicStyle',						//幻灯片图片的样式名
			interVal:4000,											//间隔时间	
			path:'slideImage/',										//幻灯片图片路径				
			buttonPanelClassName:'slideButtonDivStyle',				//放置所有按钮的"DIV容器"的样式
			buttonEachDivClassName:'slideButtonEachDivStyle',		//每一个按钮"DIV容器"的样式
			buttonEachPicClassName:'slideButtonEachPicStyle',		//每个按钮图片的样式
			buttonImgPath:'images/',								//按钮图片路径 如果为空就幻灯片图片路径用 
			event:'onclick',										//触发按钮的事件
			excStyleValue:2											//在点击按钮切换图片时，想有效果切换就设置大于1的值,设置为0或其它值将无效果切换,默认为2
		}.extend($options||{});
		if(this.options.buttonImgPath==undefined||this.options.buttonImgPath=="") this.options.buttonImgPath=this.options.path;
		if(this.options.event==undefined||this.options.even=='') this.options.event='onclick';
	},		
	open:function($self,$imgData,$buttonData)						
	{			
		if($self.counter>($imgData.img.length-1)) $self.counter=0;
		if($self.options.isNeedButton) $self.buttonController($self,$imgData,$buttonData);
		$self.play($self,$imgData.img[($self.virgin==true) ? 1:$self.counter],$imgData.url[($self.virgin==true) ? 1:$self.counter]);
		$self.counter+=1,$self.virgin=false;		
		$self.timer=setTimeout(function(){$self.open($self,$imgData,$buttonData)},$self.options.interVal);
	},
	screenSetStyle:function()
	{
		this.screen.className=this.options.screenClassName;	
		if(this.options.width!=0) this.screen.style.width=String(this.options.width)+'px';
		if(this.options.height!=0) this.screen.style.height=String(this.options.height)+'px';
	},
	createSlideDiv:function($parentDiv)												//创建幻灯片屏幕
	{
		
		var slideDiv=document.createElement('div');
			slideDiv.id='slideDiv'+this.id,slideDiv.className=this.options.slideClassName;
			if(this.options.width!=0) slideDiv.style.width=String(this.options.width)+'px';
			if(this.options.height!=0) slideDiv.style.height=String(this.options.height)+'px';			
			$parentDiv.appendChild(slideDiv);	
			return slideDiv;
	},
	createButtonDiv:function($parentDiv,$buttonCount,$imgData,$buttonData)			//创建幻灯片按钮
	{		
		var buttonDiv=document.createElement('div');
			buttonDiv.id='buttonDiv'+this.id,buttonDiv.className=this.options.buttonPanelClassName;
			if(this.options.buttonLeft!=0) buttonDiv.style.left=String(this.options.buttonLeft)+'px';
			if(this.options.buttonTop!=0) buttonDiv.style.top=String(this.options.buttonTop)+'px';			
			//makeHTML
			var buttonHtml='';
			for(var iButton=0;iButton<=$buttonCount;iButton++)
			{
				var imgButtonUrl=(iButton==0) ? this.options.buttonImgPath+$buttonData.excImg[iButton]:this.options.buttonImgPath+$buttonData.img[iButton];
				var imgButton='<img id="sButton'+iButton+this.id+'" name="sButton'+iButton+this.id+'" src="'+imgButtonUrl+'" border="0" class="'+this.options.buttonEachPicClassName+'"/>';			
				var buttonLab='<div id="sButtonDiv'+iButton+this.id+'" class="'+this.options.buttonEachDivClassName+'">'+imgButton+'</div>';
					buttonHtml+=buttonLab;
			}			
			buttonDiv.innerHTML=buttonHtml,$parentDiv.appendChild(buttonDiv);	
			var oThis=this;
			for(var iButton=0;iButton<=$buttonCount;iButton++)
			{				
				eval('$(\'sButton'+String(iButton)+this.id+'\').'+this.options.event+'=function(){oThis.rup(oThis,$imgData,$buttonData,'+iButton+')}');
			}				
	},
	rup:function($self,$imgData,$buttonData,$orderId)								//按钮点击时的响应者
	{
		if($self.options.autoPlay)
		{
			clearTimeout($self.timer);
			$self.counter=Number($orderId);
			$self.timer=setTimeout(function(){$self.open($self,$imgData,$buttonData)},$self.options.interVal);
		}
		var eventButton=$('sButton'+$orderId+this.id);
			$self.play($self,$imgData.img[$orderId],$imgData.url[$orderId],'eventTransfer');
			eventButton.src=$self.options.buttonImgPath+$buttonData.excImg[$orderId];
			for(var iButton=0;iButton<=$buttonData.img.length-1;iButton++)
			{
				if($orderId!=iButton) $('sButton'+String(iButton)+this.id).src=$self.options.buttonImgPath+$buttonData.img[iButton];
			}
	},
	play:function($self,$img,$url,$transfer)										//幻灯机
	{
		if($self.isIE)
		{			
			//revealTrans效果
			if($self.slideDiv.filters[0])
			{
				if($self.slideDiv.filters.revealTrans!=undefined)
				{
					if($self.slideDiv.filters.revealTrans.Transition==23) 
					{
						$self.slideDiv.filters.revealTrans.Transition=23;	
					}			
				}	
				var durationValue=2;	//默认的自动切换值为2，当检查到调用为"事件调用"则会查找配置表中的配置进行覆盖
				if($transfer=='eventTransfer') durationValue=($self.options.excStyleValue.constructor==Number&&$self.options.excStyleValue>0) ? $self.options.excStyleValue:0;
				$self.slideDiv.filters[0].Apply();
					$self.slideDiv.innerHTML=$self.formatHtml($img,$url);
				$self.slideDiv.filters[0].Play(duration=durationValue);	
			}
			else
			{
				$self.slideDiv.innerHTML=$self.formatHtml($img,$url);	
			}
		}
		else
		{
			$self.slideDiv.innerHTML=$self.formatHtml($img,$url);
		}			
	},
	buttonController:function($self,$imgData,$buttonData)
	{
		if($self.virgin)
		{
			$('sButton1'+$self.id).src=$self.options.buttonImgPath+$buttonData.excImg[1];				
		}
		else
		{
			$('sButton'+String($self.counter)+$self.id).src=$self.options.buttonImgPath+$buttonData.excImg[$self.counter];	
			$self.baby=String($self.counter);
		}	
		for(var iButton=0;iButton<=$buttonData.img.length-1;iButton++)
		{
			if('sButton'+String(iButton)+$self.id!='sButton'+$self.baby+$self.id) 
				$('sButton'+String(iButton)+$self.id).src=$self.options.buttonImgPath+$buttonData.img[iButton];
		}				
	},
	formatHtml:function($img,$url)												
	{
		var $$imgStyle='style="';
				if(this.options.width!=0) $$imgStyle+='width:'+this.options.width+'px;';
				if(this.options.height!=0) $$imgStyle+='height:'+this.options.height+'px;';
			$$imgStyle+='"';		
		var $$html='<a href="'+$url+'" target="_blank"><img src="'+this.options.path+$img+'" border="0" class="'+this.options.slidePicClassName+'" '+$$imgStyle+'/></a>';
			if(!this.options.isNeedLink) $$html='<img src="'+this.options.path+$img+'" border="0" class="'+this.options.slidePicClassName+'" '+$$imgStyle+'/>';
		return $$html;
	}
};

















